<template>
  <div class="editor-ad" :class="{'editor-ad-active':data.active}" v-bind:style="data.style" @click="exposetop($event,data.selfindex)">
      <img v-if="data.datalist.length>0" :src="data.datalist[toindex].url" alt="">
      <div v-if="data.datalist.length>0" class="editor-ad-img-title">{{data.datalist[toindex].title}}</div>
      <div  v-if="data.datalist.length>1" class="editor-ad-indicator-dots">
          <Icon :type="index==toindex?'ios-radio-button-on':'ios-radio-button-off'" :key="item.id" v-for="(item,index) in data.datalist" />
      </div>
      <the-asscon :active="data.active" @control="control"/>
  </div>
</template>

<script>
import TheAsscon from "@/components/assCon"
import { setInterval } from 'timers';
export default {
  props:{
    data:{
      type:Object,
      default:()=>{
        return{
         
        }
      }
    }
  },
  name: 'ad',
  data () {
    return {
      toindex:0,
      msg: '广告  暂时分为轮播和单张展示两种'

    }
  },
  mounted(){
      setInterval(()=>{
      var len = this.data.datalist.length;
          if(len>0){
            this.toindex+=1
            if(this.toindex==len){
                this.toindex=0
            }
          }
      },3000)
  },
  methods:{
    control(e){
      //1向上 2向下 3删除
      var data ={
          type:e,
          index:this.data.selfindex
      }
        this.$emit("on-contro",data)
    },
    exposetop(e,selfindex){
        this.$emit("queryTop",  {
         offsetTop:e.currentTarget.offsetTop,
         selfindex:selfindex
      })
    }
  },
    components:{
     TheAsscon  
    }
}
</script>
